<template>
  <div id="changepass">
    <h1
      style="
        font-weight: 700;
        font-style: normal;
        font-size: 24px;
        color: #344563;
      "
    >
      修改密码
    </h1>
    <div class="demo-type">
      <el-avatar
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      ></el-avatar>

      <div class="name">{{ user }}</div>
    </div>
    <el-form
      :model="pass"
      :rules="rules"
      ref="pass"
      label-width="100px"
      label-position="left"
      class="demo-pass"
    >
      <el-form-item label="旧密码" prop="oldPass">
        <el-input
          v-model="pass.oldPass"
          placeholder="请输入原密码"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPass">
        <el-input
          v-model="pass.newPass"
          placeholder="请输入新密码"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="newPass2">
        <el-input
          v-model="pass.newPass2"
          placeholder="请确认新密码"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item
        style="display: flex; justify-content: center; padding-right: 100px"
      >
        <el-button @click="cancelFn('pass')">取消</el-button>
        <el-button type="primary" @click="editLogin('pass')">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pass: {
        oldPass: "",
        newPass: "",
        newPass2: "",
      },
      user: "",
      ID: "",
      passd: "",
      userName: "",
      rules: {
        oldPass: [{ required: true, message: "请输入原密码", trigger: "blur" }],
        newPass: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
        newPass2: [
          { required: true, message: "请确认新密码", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    editLogin(f) {
      // console.log(this.pass.newPass2, this.userName);
      this.$refs[f].validate((valid) => {
        if (valid) {
          if (this.passd == this.pass.newPass) {
            this.$message.error("新密码不能与旧密码相同！");
          } else if (this.pass.newPass2 != this.pass.newPass) {
            this.$message.error("请确保密码是否相同！");
          } else {
            this.$axios({
              url: "/password/update",
              method: "put",
              data: {
                userName: this.userName,
                pwd: this.pass.newPass2,
              },
            }).then(({ data }) => {
              if (data.code == 0) {
                this.$message.success("修改成功！请重新登录");
                setTimeout(() => {
                  this.$router.push("/");
                }, 1000);
              } else {
                this.$message.error(data.msg);
              }
            });
          }
        } else {
          this.$message.error("请完善密码！");
        }
      });
    },
    cancelFn(f) {
      this.$refs[f].resetFields();
      //   window.history.go(-1);
      this.$router.replace("/home");
    },
  },
  created: function () {
    // console.log(JSON.parse(sessionStorage.getItem('user')));
    this.ID = JSON.parse(sessionStorage.getItem("user"))[0].id;
    this.user = JSON.parse(sessionStorage.getItem("user"))[0].account;
    this.userName = JSON.parse(sessionStorage.getItem("user"))[0].userName;
    this.passd = JSON.parse(sessionStorage.getItem("user"))[0].pwd;
  },
};
</script>

<style lang="less" scoped>
#changepass {
  padding: 30px;
}
.demo-type {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}
.el-avatar {
  margin-bottom: 20px;
  width: 120px;
  height: 120px;
  display: flex;
}
.name {
  font-size: 18px;
  text-align: center;
}
.el-form {
  width: 500px;
  margin: 0 auto;
}
</style>